<template>
  <div>
    <div style="margin-top: 20px; text-align: right">
      <!-- <el-checkbox-group v-model="roleIds">
        <el-checkbox v-for="item in list" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>

      </el-checkbox-group> -->
      <!-- <el-tree :data="list" :props="defaultProps" /> -->
      <!-- @node-click="handleNodeClick" -->
      <el-tree
        ref="tee"
        show-checkbox
        :data="list"
        :props="{ label: 'name' }"
        :default-expand-all="true"
        :check-strictly="true"
        node-key="id"
        :highlight-current="true"
      />
      <!--
          :data="list" 把请求数据放在弹出层里
         :props="{ label: 'name' }"  把lable名字改变
           check-strictly 显示复选框
            node-key="id"  配合复选框的api 有读取和存入的方法
        -->
      <div class="box">
        <el-button type="primary" @click="HAddfn">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { tranListToTreeData } from '@/utils/tree'
import { getPermissionList } from '@/api/permission'
import { assignPerm, getRoleDetail } from '@/api/setting'
export default {
  props: {
    curid: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      list: [] // 列表数据项

    }
  },
  created() {
    // 获取当前所有内容
    this.getPermissionList()
  },
  methods: {
    // 数据回填
    async  setlist() {
      const roleDetail = await getRoleDetail(this.curid)
      // 得到当前点击的这一项的选中状态
      this.$refs.tee.setCheckedKeys(roleDetail.data.permIds) // 把获取到的id赋给复选框
      console.log(roleDetail)
    },
    // 获取当前列表
    async  getPermissionList() {
      const res = await getPermissionList()
      this.list = tranListToTreeData(res.data) // 把数据展示到弹出层里
      // console.log(res)
      this.setlist()
      // 发送请求, 获取当前默认权限id
    },
    // 点击取消按钮
    closeDialog() {
      this.$emit('close')
    },
    // 点击确定提交按钮
    async  HAddfn() {
      try {
        await assignPerm({
          id: this.curid,
          permIds: this.$refs.tee.getCheckedKeys() // 读取选中状态对应的id
        })
        // 提交选中的状态
        this.$message.success('分配成功')
        this.$refs.tee.setCheckedKeys([])
        this.$emit('close')
        // 把获取到的id赋给复选框
      } catch (err) {
        this.$message.error(err.message)
      }
      //   console.log(re)

      //   console.log(re)
      //   console.log(this.curid)
    }
  }
}
</script>

<style >
.box{
  margin-top: 10px;
  text-align: center;
}
</style>
